<template>
  <div class="permission-page">
    <div class="content-section">
      <!-- 上部分：所有者和已有访问者 -->
      <div class="section">
        <div class="owner-section">
          <h3>Owner (who can edit the dashboard and permission)</h3>
          <el-input
            v-model="owner"
            placeholder="Dashboard owner"
            :readonly="true"
            class="permission-input" />
        </div>

        <div class="visitors-section">
          <h3>Permitted visitors</h3>
          <el-input
            v-model="visitors"
            type="textarea"
            :rows="6"
            placeholder="Current permitted visitors"
            :readonly="true"
            resize="none"
            class="permission-input" />
        </div>
      </div>

      <!-- 中部分：添加访问者 -->
      <div class="section">
        <h3>Add permitted visitors</h3>
        <div class="action-row">
          <el-input
            v-model="newVisitor"
            placeholder="Enter username to add"
            class="permission-input" />
          <el-button
            type="primary"
            @click="handleAddVisitor">
            Confirm
          </el-button>
        </div>
      </div>

      <!-- 下部分：删除访问者 -->
      <div class="section">
        <h3>Delete permitted visitors</h3>
        <div class="action-row">
          <el-input
            v-model="visitorToDelete"
            placeholder="Enter username to delete"
            class="permission-input" />
          <el-button
            type="danger"
            @click="handleDeleteVisitor">
            Confirm
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getDashboardInfo, getVisitors, addVisitor, removeVisitor } from '@/api/dashboard'
import { ElMessage } from 'element-plus'

const route = useRoute()
const owner = ref('')
const visitors = ref('')
const newVisitor = ref('')
const visitorToDelete = ref('')

// 获取仪表板信息
const fetchDashboardInfo = async () => {
  try {
    const data = await getDashboardInfo(route.params.id)
    owner.value = data.ownerName
  } catch (error) {
    ElMessage.error('Failed to get dashboard information')
  }
}

// 获取访问者列表
const fetchVisitors = async () => {
  try {
    const data = await getVisitors(route.params.id)
    visitors.value = data.visitorNames.join('\n')
  } catch (error) {
    ElMessage.error('Failed to get visitor list')
  }
}

// 添加访问者
const handleAddVisitor = async () => {
  if (!newVisitor.value) {
    ElMessage.warning('Please enter the username')
    return
  }
  try {
    await addVisitor(route.params.id, newVisitor.value)
    ElMessage.success('Add successful')
    await fetchVisitors()
  } catch (error) {
    ElMessage.error('Failed to add visitor')
  } finally {
    newVisitor.value = ''
  }
}

// 删除访问者
const handleDeleteVisitor = async () => {
  if (!visitorToDelete.value) {
    ElMessage.warning('Please enter the username')
    return
  }
  try {
    await removeVisitor(route.params.id, visitorToDelete.value)
    ElMessage.success('Delete successful')
    await fetchVisitors()
  } catch (error) {
    ElMessage.error('Failed to delete visitor')
  } finally {
    visitorToDelete.value = ''
  }
}

// 监听路由参数变化，重新获取数据
watch(() => route.params.id, (newId) => {
  if (newId) {
    fetchDashboardInfo()
    fetchVisitors()
  }
}, { immediate: true })

// 初始化
onMounted(() => {
  if (route.params.id) {
    fetchDashboardInfo()
    fetchVisitors()
  }
})
</script>

<style scoped>
.permission-page {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
}

.header-section {
  padding: 24px;
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
}

.main-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2f3d;
  margin-bottom: 8px;
}

.sub-title {
  font-size: 14px;
  color: #5e6d82;
  margin: 0;
}

.content-section {
  padding: 24px;
}

.section {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.section h3 {
  font-size: 16px;
  color: #303133;
  margin: 0 0 16px 0;
}

.owner-section,
.visitors-section {
  margin-bottom: 24px;
}

.action-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.permission-input {
  flex: 1;
}

:deep(.el-textarea__inner) {
  font-family: monospace;
}

.dashboard-selector {
  margin-bottom: 24px;
}
</style>